<template>
  <div v-loading="listLoading" style="min-height: 100px">
    <div class="tool-box">
      <div class="dept-name">{{ deptName }}</div>
      <el-checkbox v-model="hideDisable" v-if="groupList.length">隐藏无需检查的项</el-checkbox>
    </div>
    <el-empty v-if="!groupList.length" />

    <div v-for="group in filteredGroupList" :key="group.key">
      <div class="subtitle">{{ group.displayName }}</div>
      <el-table class="g-table-tree-expand-align" :data="group.list" size="small" row-key="bsChkitemId" default-expand-all style="margin-bottom: 30px">
        <el-table-column label="检查项编码" prop="chkitemCode" show-overflow-tooltip min-width="130" class-name="expand-column" />
        <el-table-column label="检查项名称" prop="chkitemName" show-overflow-tooltip min-width="100" />
        <el-table-column label="检查项类型" align="center" min-width="100">
          <dict-tag slot-scope="{ row }" :options="dict.type.cq_pe_business_type_expand" :value="row.chkitemType" v-if="row.chkitemType" />
        </el-table-column>
        <!--
        <el-table-column label="检查开始时间" prop="startTime" min-width="140" />
        <el-table-column label="检查结束时间" prop="latestTime" min-width="140" />
        -->
        <el-table-column label="是否需要检查" align="center" min-width="100">
          <el-tag slot-scope="{ row }" size="small" :type="row.isEnable ? 'primary' : 'info'">{{ row.isEnable ? '是' : '否' }}</el-tag>
        </el-table-column>
        <el-table-column label="原因" prop="reason" show-overflow-tooltip min-width="100" />
        <el-table-column label="操作" align="center" width="80" fixed="right" v-if="proIsEnable">
          <template slot-scope="{ row }">
            <div v-if="!row.isGldz">
              <!-- <el-button size="mini" type="text" icon="el-icon-time" @click="$refs.EditTime.open(row)">修改</el-button> -->
              <el-button size="mini" type="text" icon="el-icon-delete" :loading="row.isEnableLoading" @click="toggleIsEnable(row)" v-if="row.isEnable">作废</el-button>
              <el-button size="mini" type="text" icon="el-icon-refresh-left" :loading="row.isEnableLoading" @click="toggleIsEnable(row)" v-else>恢复</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <EditTime ref="EditTime" v-model="showEditTime" @ok="getList" />
  </div>
</template>
<script>
// 检查项列表
import { debounce } from '@/utils'
import { listRltChkitem, enableRltChkitem, disableRltChkitem } from '@/api/cqPe/peRecord'
import EditTime from './EditPeRltChkitemTime'
import { refactorRltChkList } from './common'

export default {
  name: 'PeRltChkitem',
  components: { EditTime },
  dicts: ['cq_pe_business_type_expand'],
  data() {
    return {
      rltProId: '',
      proIsEnable: false, // 项目作废，检查项不能操作
      deptName: '',
      listLoading: false,
      groupList: [],
      filteredGroupList: [],
      hideDisable: false,
      showEditTime: false
    }
  },
  watch: {
    hideDisable() {
      this.handleQueryDebounce()
    }
  },
  created() {
    this.handleQueryDebounce = debounce(this.handleQuery)
  },
  methods: {
    init({ rltProId, proIsEnable, deptName }) {
      this.rltProId = rltProId
      this.proIsEnable = proIsEnable
      this.deptName = deptName
      this.getList()
    },
    async getList() {
      const { rltProId } = this
      if (!rltProId) return this.$message.error('参数错误：rltProId 不能为空')

      const opt = { rltProId }
      this.listLoading = true
      const res = await listRltChkitem(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      const data = res.data || []
      data.map(i => {
        i.isEnableLoading = false
      })

      this.groupList = refactorRltChkList(data)
      this.handleQuery()
    },
    handleQuery() {
      // 本地过滤
      const { groupList, hideDisable } = this
      const groupList2 = JSON.parse(JSON.stringify(groupList))
      if (!hideDisable || !groupList2.length) return (this.filteredGroupList = groupList2)

      groupList2.map(group => {
        group.list = group.list.filter(item => {
          if (item.children?.length) item.children = item.children.filter(i => i.isEnable)
          return item.isEnable
        })
      })
      this.filteredGroupList = groupList2
    },
    async toggleIsEnable(item) {
      if (item.isEnableLoading) return
      const isEnable = item.isEnable ? 0 : 1
      const name = isEnable === 1 ? '启用检查' : '关闭检查'

      const res1 = await this.$prompt('', `${name}原因`, {
        inputPlaceholder: `请输入${name}原因`,
        inputValidator: val => !!(val || '').trim(),
        inputErrorMessage: `请输入${name}原因`
      }).catch(action => ({ action }))
      if (res1.action !== 'confirm') return

      const reason = (res1.value || '').trim()
      const opt = { rltChkId: item.rltChkId, isEnable, reason }
      const submitApi = isEnable ? enableRltChkitem : disableRltChkitem
      item.isEnableLoading = true
      const res = await submitApi(opt).catch(() => false)
      item.isEnableLoading = false
      if (res === false) return

      this.$message.success(`已${name}`)
      this.getList()
      this.$emit('change', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.tool-box {
  display: flex;
  justify-content: space-between;
  margin: -10px 0 10px;
}
.dept-name {
  font-size: 14px;
  color: #1f2f3d;
}
.subtitle {
  display: inline-block;
  min-width: 200px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  color: #515a6e;
  padding: 0 20px 5px 0;
  margin: 10px 0;
}
</style>
